<script >
import axios from "axios";
export default {
  name: "StudentPage",
  data() {
    return {
      student: null,
      queryId: null,
      studentById: null,
      studentId: null,
      Sname: null,
      Sclass: null,
      telephone: null,
      qq: null,
      sid: null,
      deleteId: null,
    }
  },
  methods: {
    getStudents() {
      axios.get("http://localhost:8081/students")
          .then(resp => {
            console.log(resp);
            this.student = resp.data;
          })
    },
    getStudentById() {
      axios.get(`http://localhost:8081/student/${this.queryId}`)
          .then(resp => {
            console.log(resp);
            this.studentById = resp.data;
          })
    },
    addStudent() {
      axios.post("http://localhost:8081/student",
          {
            studentId: this.studentId,
            name: this.Sname,
            sclass: this.Sclass,
            telephone: this.telephone,
            qq: this.qq,
          }).then(resp => {
        console.log(resp);
      })
    },
    updateStudent() {
      axios.put("http://localhost:8081/student",
          {
            id: this.sid,
            studentId: this.studentId,
            name: this.Sname,
            sclass: this.Sclass,
            telephone: this.telephone,
            qq: this.qq,
          }).then(resp => {
        console.log(resp);
      })
    },
    deleteStudent() {
      axios.delete(`http://localhost:8081/student/${this.deleteId}`)
          .then(resp => {
        console.log(resp);
      })
    }

  }
}

</script>
<template>
  <div>
    <button v-on:click="getStudents">获取</button>
    <div v-for="student in student" v-bind:key=student.id>
      {{student}}
    </div>
    <p></p>
    <div>请输入要查询的id：
      <input v-model="queryId">
    </div>
    <button v-on:click="getStudentById">获取ID</button>
    <div>{{studentById}}</div>
    <div>
      请输入要添加的学生信息:
      <div>
        studentid
        <input v-model="studentId">
      </div>
      <div>
        name
        <input v-model="Sname">
      </div>
      <div>
        class
        <input v-model="Sclass">
      </div>
      <div>
        telephone
        <input v-model="telephone">
      </div>
      <div>
        qq
        <input v-model="qq">
      </div>
    </div>
    <button v-on:click="addStudent">添加学生</button>
    <div>
      请输入要修改的学生信息:
      <div>
        id
        <input v-model="sid">
      </div>
      <div>
        studentid
        <input v-model="studentId">
      </div>
      <div>
        name
        <input v-model="Sname">
      </div>
      <div>
        class
        <input v-model="Sclass">
      </div>
      <div>
        telephone
        <input v-model="telephone">
      </div>
      <div>
        qq
        <input v-model="qq">
      </div>
    </div>
    <button v-on:click="updateStudent">修改学生</button>
    <p></p>
    <div>
      请输入删除用户id:
      <input v-model="deleteId">
      <div>
        <button v-on:click="deleteStudent">删除学生</button>
      </div>
    </div>

  </div>
</template>

<style scoped>

</style>